<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom的其余方法</title>
    <script>
        window.onload=function () {
            var body=document.body;//获取body标签
            console.log(body);

            var de=document.documentElement;//获取html标签
            console.log(de);

            //获取所有元素第一种方法
            var al=document.all;
            console.log(al);//HTMLAllCollection(6) [html, head, meta, title, script, body]
            console.log(al.length);//6
            console.log(typeof al);//undefined
            for (var i=0;i<al.length;i++){
                console.log(al[i]);
            }
            var all=document.getElementsByTagName("*");
            console.log(all);

            // /
            var div=document.querySelector(".box1 div ");
            console.log(div.innerHTML);

            var box1=document.querySelectorAll(".box1");
            console.log(box1.length);
        }
    </script>
</head>
<body>
<script>
    /*1.获取body元素  document.body
     *2.获取html元素 document.documentElement
     * 3.获取所有元素 3.1种   document.all
     *              3.2 种   document.getElementsByTagName("*")
     *4.根据元素的class属性值查询一组元素节点对象
     *      document.getElementsByClassName()可以根据class属性值获取一组元素节点对象
     *      该方法仅支持IE9以上的版本
     *5.    document.querySelector(".box1 div")
     *      需要一个选择器的字符串做为参数，可以根据scc选择器来查询一个元素对象节点
     *      如果满足的条件有多个，则返回第一个 有局限性
     *6.document.querySelectorAll(".box1")
     *      用法和document.querySelector(".box1 div")类似。不同的是它会将符合条件
     *          的元素都封装到一个数组中，哪怕只有一个，也会返回数组
     *
    */
</script>
<div class="box1">
    <div>我是box1里的div</div>
</div>
<div class="box1">
    <div>我是box1里的div</div>
</div>
<div class="box1">
    <div>我是box1里的div</div>
</div>
<div class="box2"></div>
</body>
</html>